<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试第三题</title>
</head>
<style>
    .divBg{
        width: 990px;
        height: 475px;
        background-image:url(img/bg.jpg);
    }
    .divLg{
        width: 350px;
        height: 450px;
        float:right;
        margin-top: 10px;
        margin-right: 50px;
        background-color: #FFFFFF;
    }
    .divTop{
        height: 38px;
        background-color:#FFF8F0;
        text-align: center;
        padding-top: 10px;

    }
    #fontTop{
        font-size: 14px;
        font-family: 宋体;
        color: darkgray;
    }
    .divSL{
        height: 38px;
    }
    .divSM{
        width: 170px;
        text-align: center;
        font-size: 22px;
        font-family: 宋体;
        float: left;
        margin-top: 10px;
    }
    .divZH{
        width: 170px;
        text-align: center;
        font-size: 22px;
        float: left;
        margin-top: 5px;
    }
    #divSG{
        float: left;
        color: darkgray;
        margin-top: 10px;
    }
    .divSM a{
        color: black;
        text-decoration: none;
    }
    .divSM a:hover{
        font-weight: bold;
    }
    .divZH a{
        color: black;
        text-decoration: none;
    }
    .divZH a:hover{
        font-weight: bold;
        font-family: 宋体;
        color: #E4393C;
    }
    .divSX{
        border-bottom: solid 1px #CCC;
        margin-top: 10px;
    }
    .divText{
        width: 310px;
        height: 200px;
        margin-left: 20px;
        margin-top: 40px;
    }
    .divUTP{
        width: 38px;
        height: 38px;
        background-image: url(img/pwd.png);
        float: left;
    }
    
    .divYH  input{
        margin-top: 10px;
        margin-left:10px;
        width: 250px;
        float: left;
        border: none;
        outline: none;
    }
    .divYH{
        width: 310px;
        height: 40px;
        border: 1px solid #CCC;
    }
    .divPWD{
        width: 310px;
        margin-top: 25px;
        height: 40px;
        border: 1px solid #CCC;
    }
    .divPTP{
        width: 38px;
        height: 38px;
        background-image: url(img/pwd.png);
        background-position: -48px 0px;
        float: left;
    }
    .divPWD input{
        margin-top: 10px;
        width: 250px;
        float: left;
        margin-left:10px;
        border: none;
        outline: none;
    }
    .divLOG{
        margin-top: 50px;
    }
    .divLOG input{
        background-color:#E4393C;
        width: 310px;
        height: 40px;
        border: 0px;
        font-size: 20px;
        color: #FFFFFF;
        font-weight: bold;
        letter-spacing: 25px;
    }
    #fPWD a{
        float:right;
        text-decoration: none;
        color:darkgray;
        margin-top: 15px;
    }
    .divFOT{
        margin-top:49px;
        height: 60px;
        background-color: #FCFCFC;
    }
    .divFOT li{
       float: left;
       list-style: none;
       
    }
    .liQQ{
        width: 20px;
        height: 18px;
        margin-top: 22px;
        background-image: url(img/qq.png);
        background-position: 1px 0px;
    }
    .liQQ a{
        margin-left: 25px;
        color:darkgray;
        text-decoration: none;
    }
    #liSpan{
        margin-left: 15px;
        color: #CCC;
    }
    .liWX{
        width: 20px;
        height: 18px;
        margin-left: 62px;
        margin-top: 22px;
        background-image: url(img/qq.png);
        background-position: 19px 0px;
    }
    .liWX a{
        width: 50px;
        color:darkgray;
        margin-left: 25px;
        float: left;
        text-decoration: none;
    }
    .liLJ{
        width: 20px;
        height: 18px;
        margin-top: 22px;
        margin-left: 100px;
        background-position: 20px -73px;
        background-image: url(img/pwd.png);
    }
    .liLJ a{
        width: 80px;
        float: left;
        color:#E4393C;
		font-weight:bold;
        font-family: 宋体;
        text-decoration: none;
        margin-left: 20px;
    }
</style>
<body>
    <!-- 背景图片 -->
    <div class="divBg">
        <!-- 控制登录外边框 -->
        <div class='divLg'>
            <!-- 控制登录头部 -->
            <div class="divTop">
                <img src="img/icon.png"/>
                <span id='fontTop'>京东不会以任何理由要求您转账汇款，谨防诈骗。</span> 
            </div>
            <!-- 控制扫码 账号登录 -->
            <div class="divSL">
                <div class="divSM"><a href="#">扫码登录</a></div>
                <span id="divSG">|</span>
                <div class="divZH"><a href="#">账号登录</a></div>
            </div>
            <!-- 横线 -->
            <div class="divSX"></div>
            <!-- 文本框 -->
            <div class='divText'>
                <div class="divYH"><div class="divUTP"></div><input id='username'  type='text'placeholder="邮箱/用户名/登录手机"/></div>
                <div class="divPWD"><div class="divPTP"></div><input id='password' type='password' placeholder='密码'/></div>
                <span id="fPWD"><a href="#">忘记密码</a></span>
                <div class="divLOG"><input id='login' type="button" value="登录"/></div>
            </div>
            <!-- 底部 -->
            <div class="divFOT">
                <ul>
                    <li class="liQQ"><a href="#">QQ</a><span id='liSpan'>|</span></li>
                    <li class="liWX"><a href="#">微信</a></li>
                    <li class="liLJ"><a href="#">立即注册</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

<script>
    document.getElementById('login').addEventListener('click',function(){
        let username=document.getElementById('username').value;
        let password=document.getElementById('password').value;
        //保存用户名输入的值
        localStorage.setItem('username',username);
        //保存密码输入的值
        localStorage.setItem('password',password);
    });
    window.onload=function(){
        //获取用户名输入的值
        document.getElementById('username').value=localStorage.getItem('username');
        //获取密码输入的值
        document.getElementById('password').value=localStorage.getItem('password');
    }
</script>
</html>